<!DOCTYPE html>
<html>
<head>
	<title>vue practice</title>
	<meta charset="utf-8">
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
	<style type="text/css">
		.class1{
			background: #2a28c37a;
  			color: #eee;
		}
	</style>
</head>
<body>
<div id="vue1">
	{{name}}
	<div v-html="detail()"></div>
</div>
<div id="bind_test">
	 <input type="checkbox" v-model="use" name="">
	 <p v-bind:class="{'class1':use}" >test v-bind tag</p>
</div>
<script type="text/javascript">
	var vue = new Vue({
		el:'#vue1',
		data:{
			name:'abner chow'
		},
		methods:{
			detail:function(){
				return '<h1>菜鸟教程</h1>';
			}
		}
	});

	var bind = new Vue({
		el:'#bind_test',
		data:{
			use:'false'
		}
	})
</script>
</body>
</html>